<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10M Points</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>

		<script>
			// https://github.com/highcharts/highcharts/issues/5948
			// http://jsfiddle.net/aygnmvLr/

			function randColor(){
				return "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
			}

			function prepData(seriesPoints, numSeries = 1, seriesShift = 0) {
				console.time("prep");

				let x = Array(seriesPoints),
					ys = [],
					a,
					b,
					c,
					spike;

				for (let i = 0; i < seriesPoints; i++)
					x[i] = i;

				for (let j = 0; j < numSeries; j++) {
					let y = Array(seriesPoints);
					let shift = j * seriesShift;

					for (let i = 0; i < seriesPoints; i++) {
						if (i % 100 === 0)
							a = 2 * Math.random();
						if (i % 1000 === 0)
							b = 2 * Math.random();
						if (i % 10000 === 0)
							c = 2 * Math.random();
						if (i % 50000 === 0)
							spike = 10;
						else
							spike = 0;

						y[i] = shift + 2 * Math.sin(i / 100) + a + b + c + spike + Math.random();
					}

					ys.push(y);
				}

				let data = [x].concat(ys);

				console.timeEnd("prep");

				return data;
			}

			function makeChart(data, one = false) {
				let series = [];

				for (let i = 1; i < data.length; i++) {
					series.push({
						label: i,
						width: 1/devicePixelRatio,
						stroke: randColor(),
					});
				}

				let opts = {
					title: data[0].length.toLocaleString("en-US") + " points x " + (data.length - 1) + " series",
					width: 1920,
					height: 400,
					focus: {
						alpha: 1
					},
					cursor: {
						points: {
							one,
						},
						focus: {
							prox: 30
						}
					},
				//	legend: {
				//		show: false,
				//	},
					scales: {
						x: {
							time: false
						}
					},
					series: [
						{},
						...series
					]
				};

				return new uPlot(opts, data, document.body);
			}

		//	let data1 = prepData(10);
		//	let data1 = prepData(5e6);
		//	let data1 = prepData(1e7);
			let data1 = prepData(2e6);
			let u1 = makeChart(data1, false);

			let data2 = prepData(40_000, 50, 2);
			let u2 = makeChart(data2, true);

			setTimeout(() => {
				console.time('chart1 redraw');
				u1.setData(data1);
				queueMicrotask(() => {
					console.timeEnd('chart1 redraw');
				});
				data = null;
			}, 1000);

			setTimeout(() => {
				console.time('chart2 redraw');
				u2.setData(data2);
				queueMicrotask(() => {
					console.timeEnd('chart2 redraw');
				});
				data = null;
			}, 2000);
		</script>
	</body>
</html>